<template>
    <div class="login_big poa">
        <div class="login_content poa">
            <login_body @last_password="last_password" @login_succsess="quit" @enroll="enroll" @quit="quit" />
        </div>
        <div ref="enroll_dom" class="login_content poa enroll_dom">
            <enroll_body @enroll_succsess='close_enroll_dom' @quit="close_enroll_dom" />
        </div>
        <div ref="set_password_dom" class="login_content poa enroll_dom set_password">
            <set_password @set_password_succsess='close_set_password_dom' @quit="close_set_password_dom"
                :email="form.email" />
        </div>
        <MyMessage :flag="alert_flag" :text="error_text" />
    </div>
</template>
<script setup>
import { last_password_code, getCode } from '../api/api'
import { defineAsyncComponent, ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const login_body = defineAsyncComponent(() => import('../components/user/user_login_body.vue'))
const enroll_body = defineAsyncComponent(() => import('../components/user/user_enroll_body.vue'))
const set_password = defineAsyncComponent(() => import('../components/user/user_set_password_body.vue'))
const enroll_dom = ref()
const set_password_dom = ref()
let alert_flag = ref()
let error_text = ref()
let time = 60
let timer = ''
let form = reactive(
    {
        email: '',
    }
)
function alertfn(text) {
    error_text.value = text
    alert_flag.value = true
    setTimeout(() => {
        alert_flag.value = false
    }, 2000)
}
function last_password(value) {
    form.email = value
    last_password_code(`/api/common/user/detectEmail/${form.email}`).then(res => {
        if (res.data.code == 'user:not_found') {
            alertfn('改账号未注册')
        } else if (res.data.code == 200) {
            clearInterval(timer)
            time = 60
            let dom = document.querySelector('.set_password_getcode')
            dom.innerHTML = time + '后获取'
            dom.disabled = true
            timer = setInterval(() => {
                dom.innerHTML = time-- + '后获取'
                if (time == 0) {
                    dom.innerHTML = '获取验证码'
                    dom.disabled = false
                    clearInterval(timer)
                }
            }, 1000)
            set_password_dom.value.style = 'transform: translateX(0); opacity: 1;'
            getCode(`/api/common/user/getCode/${form.email}`)
        } else {
            alertfn('未知错误')
        }
    })

}
function close_set_password_dom() {
    set_password_dom.value.style = 'transform: translateX(100%); opacity: 0;'
}
function close_enroll_dom() {
    enroll_dom.value.style = 'transform: translateX(100%); opacity: 0;'
}
function enroll() {
    enroll_dom.value.style = 'transform: translateX(0); opacity: 1;'
}
function quit() {
    router.push('/Home_Page')
}

</script>
<style lang="scss" scoped>
@function r($v) {
    @return $v / (390 /10rem)
}

.login_big {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.enroll_dom {
    transform: translateX(100%);
    transition: all 1s;
    opacity: 0;
}
</style>